<template>
  <div>
    <Header></Header>

    <div>
      <img src="./images/q1.jpg" alt="">
    </div>

    <div style="margin-top: 40px;">
      <Row type="flex" justify="center" :gutter="16">
        <Col span="3.2">
            <div style="background:red;">
              <Menu :theme="theme3" active-name="1" @on-select="changeContent">
                <MenuItem name="1">
                  <Icon type="md-document" />
                  公司简介
                </MenuItem>
                <MenuItem name="2">
                  <Icon type="md-chatbubbles" />
                  公司资讯
                </MenuItem>
              </Menu>
            </div>
        </Col>
        <Col span="12">
          <div  style="background:red;">
            <div v-if="activeName == 1">
              简介
            </div>
            <div v-else>
              资讯
            </div>
          </div>
        </Col>
      </Row>
    </div>

  </div>
</template>
<script>
import Header from '../../components/Header.vue'

export default {
  data () {
    return {
      theme3: 'light',
      activeName: '1'
    }
  },

  components: {
    Header
  },

  methods: {
    changeContent (name) {
      this.activeName = name
    }
  }
}
</script>

<style>
img{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>
